<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text=""	:title="title" @clickLeft="back" />
	<view class="form">
		<nut-form :model-value="formData" :rules="{name: [{ message: 'name 至少两个字符', validator: nameLengthValidator }]}" ref="ruleForm">
			<nut-form-item label="收货人地址" prop="name" required :rules="[{ required: true, message: '请输入收货人姓名' }]">
				<nut-input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name" placeholder="请输入收货人姓名" type="text" />
			</nut-form-item>
			<nut-form-item label="所在地：" prop="district" required :rules="[{ required: true, message: '请选择所在地区' }]">
				<pickerAddress @change="change">
					{{formData.district? formData.district:'请选择'}}
				</pickerAddress>
			</nut-form-item>
			<nut-form-item label="详细地址：" prop="detailed_address" required :rules="[{ required: true, message: '请输入正确地址' }]">
				<nut-input class="nut-input-text" v-model="formData.detailed_address" placeholder="请输入详细地址" type="text" />
			</nut-form-item>
			<!-- <nut-form-item label="邮编：" prop="address" required :rules="[{ required: true, message: '请输入正确邮编' }]">
				<nut-input class="nut-input-text" v-model="formData.address" placeholder="请输入正确邮编" type="text" />
			</nut-form-item> -->
			<nut-form-item label="手机号：" prop="mobile" required :rules="[
					{ required: true, message: '请填写请输入正确手机号' },
					{ validator: asyncValidator, message: '电话格式不正确' }]">
				<nut-input class="nut-input-text" v-model="formData.mobile" placeholder="请输入正确手机号，异步校验电话格式" type="text" />
			</nut-form-item>
			<!-- <nut-cell>
				<nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">提交</nut-button>
				<nut-button size="small" @click="reset">重置提示状态</nut-button>
			</nut-cell> -->
		</nut-form>
		
		<view class="setting" @click="addressDefault()">
			<text v-if="formData.is_default == true" class="circle"></text>
			<text v-else class="circle circles"></text>
			设为默认地址
		</view>
	</view>
	<view class="main-button" @click="submit()">
		<text>{{ type == 0? '新增' : '编辑' }}</text>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref, reactive, onMounted } from 'vue';
	import { RegionList, addressTree } from '@/request/api/address.js';
	import { addregion, editregion } from '@/request/api/address.js';
	
	const title = ref('新增收货地址');
	const type = ref(0);  // 0 新增  1编辑
	
	onLoad((e) => {
		type.value = Number(e.type);
		if (type.value == 1) {  // 编辑回显
			title.value = '编辑收货地址';
			formData.name = JSON.parse(e.data).name;
			formData.mobile = JSON.parse(e.data).mobile;
			formData.district = JSON.parse(e.data).district;
			formData.detailed_address = JSON.parse(e.data).detailed_address;
			formData.is_default = JSON.parse(e.data).is_default;
			formData.id = JSON.parse(e.data).id;
		}
	})
	
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
	const data = reactive({
		area: []
	})

	const formData = reactive({
		name: '',
		mobile: '',
		district: '',
		detailed_address: '',
		is_default: false
	});
	
	onMounted(() => {
		// getAddress();
		// getaddressTree();
	})
	
	// 城市
	// const getAddress = async () => {
	// 	try {
	// 		const resultData = await RegionList();
	// 	} catch (e) { }
	// }
	
	const addressDefault = () => {
		formData.is_default = !formData.is_default;
	}
	
	const change = (data) => {
		formData.district = data.data.toString().replace(/,/g, '');
	} 
	
	const validate = (item) => {
		console.log(item);
	};
	
	const ruleForm = ref(null);

	// 新增
	const submit = () => {
		ruleForm.value.validate().then(({
			valid,
			errors
		}) => {
			if (valid) {
				if (type.value == 0) {
					var resulet = addregion(formData);
				} else {
					var resulet = editregion(formData);
				};
				resulet.then(res => {
					uni.showToast({ title: res.msg, icon: 'none' });
				})
			}
		});
	};
	const reset = () => {
		ruleForm.value.reset();
	};
	// 失去焦点校验
	const customBlurValidate = (prop) => {
		ruleForm.value.validate(prop).then(({
			valid,
			errors
		}) => {
			if (valid) {
				console.log('success', formData);
			} else {
				console.log('error submit!!', errors);
			}
		});
	};
	// 函数校验
	const customValidator = (val) => /^\d+$/.test(val);
	const customRulePropValidator = (val, rule) => {
		return (rule?.reg).test(val);
	};
	const nameLengthValidator = (val) => val?.length >= 2;
	// Promise 异步校验
	const asyncValidator = (val) => {
		return new Promise((resolve) => {
			setTimeout(() => {
				resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
			}, 1000);
		});
	};
</script>

<style lang="scss" scoped>
	.form {
		padding: 20rpx 16rpx 0rpx 16rpx;
		box-sizing: border-box;
		::v-deep .nut-cell {
			align-items: center !important;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 36rpx;
		}
		
		::v-deep .nut-input {
			padding-left: 0rpx !important;
		}
		
		.setting {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 36rpx;
			padding-left: 20rpx;
			.circle {
				width: 28rpx;
				height: 28rpx;
				background-color: #4CBC4E;
				margin-right: 10rpx;
				border-radius: 50%;
			}
			.circles {
				background-color: gray !important;
			}
		}
	}
	
	.main-button {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		width: 678rpx;
		height: 92rpx;
		margin: 0 auto;
		background-color: #000000;
		border-radius: 100rpx;
		color: #fff;
		font-size: 30rpx;
		line-height: 92rpx;
		text-align: center;
	}
</style>

